<template>
	<view class="collect">
		<view class="main">
			<view class="items" v-for="(item, index) in list" :key="index">
				<view class="lefts">
					<view class="imgs">
						<image :src="item.img" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="main-text">
					<view class="desc">{{item.desc}}</view>
					<view class="bottom">
						<view class="person">
							{{item.saveCount}}收藏
						</view>
						<view class="price">
						¥	{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getGoodsCollList} from '@/network/collect/index.js'
	export default {
		data() {
			return {
				list: []
			};
		},
		async	onLoad() {
			const res =	await getGoodsCollList()
			console.log(res, '随机数据')
			this.list = res		
		}
	}
</script>

<style lang="scss" scoped>
.collect {
	.main {
		padding: 40rpx;
		.items {
			display: flex;
			margin: 0rpx 0 30rpx;
			// justify-content: space-between;
			.imgs {
				width: 80px;
				height: 80px;
				border-radius: 16rpx;
				margin-right: 40rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.main-text {
				font-size: 26rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.bottom {
					display: flex;
					justify-content: space-between;
					.price {
						font-size: 32rpx;
						font-weight: bolder;
					}
				}
			}
		}
	}
}
</style>
